{% extends 'myhome/index.html'%}
{% block title %}
<title>我的订单</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<!-- <link href="/static/myhome/css/orstyle.css" rel="stylesheet" type="text/css"> -->


<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block con %}
<div class="center">
            <div class="col-main">
                <div class="main-wrap">

                    <div class="user-address address">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                        </div>
                        <hr>
                        <li class="user-addresslist" style="display:none;">
                            <span onclick="default1(this);" class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
                            <p class="new-tit new-p-re">
                                <span class="new-txt buy-user">小叮当</span>
                                <span class="new-txt-rd2 buy-phone">159****1622</span>
                            </p>
                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">地址：</span>
                                    <span class="province">湖北</span>
                                    <span class="city">武汉</span>
                                    <span class="dist">洪山</span>
                                    <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                            </div>
                            <div class="new-addr-btn">
                                <a href="#"><i class="am-icon-edit"></i>编辑</a>
                                <span class="new-addr-bar">|</span>
                                <a href="javascript:void(0);" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
                            </div>
                        </li>
                        <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails AddressAll">

                            

                                                        
                        </ul>
                        <div class="clear"></div>
                        <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                        <!--例子-->
                        <div class="" id="doc-modal-1">

                            <div class="add-dress">

                                <!--标题 -->
                                <div class="am-cf am-padding">
                                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                                </div>
                                <hr>

                                <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                                    <form class="am-form am-form-horizontal">

                                        <div class="am-form-group">
                                            <label for="user-name" class="am-form-label">收货人</label>
                                            <div class="am-form-content">
                                                <input type="text" id="user-name" placeholder="收货人">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="user-phone" class="am-form-label">手机号码</label>
                                            <div class="am-form-content">
                                                <input id="user-phone" placeholder="手机号必填" type="text">
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label for="user-address" class="am-form-label">所在地</label>
                                            <div class="am-form-content address">
                                                <select name="sheng">
                                                    {% for v in citys %}
                                                        <option value="{{ v.id }}">{{ v.name }}</option>
                                                    {% endfor %}
                                                </select>

                                                <select name="shi">
                                                    <option>--请选择--</option>
                                                </select>
                                                <select name="xian">
                                                    <option>--请选择--</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="user-intro" class="am-form-label">详细地址</label>
                                            <div class="am-form-content">
                                                <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                                <small>100字以内写出你的详细地址...</small>
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="am-u-sm-9 am-u-sm-push-3">
                                                <a class="am-btn am-btn-danger" id="addressadd">保存</a>
                                                <a href="javascript: void(0)" id="addressclose" class="am-close am-btn am-btn-danger" data-am-modal-close="">取消</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>

                        </div>

                    </div>

                    <script type="text/javascript">
                        $(document).ready(function() {                          
                            $(".new-option-r").click(function() {
                                $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                            });
                            
                            var $ww = $(window).width();
                            if($ww>640) {
                                $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                            }
                            
                        })
                    </script>

                    <div class="clear"></div>

                </div>
                
            </div>

            <aside class="menu">
                <ul>
                    <li class="person">
                        <a href="#">个人中心</a>
                    </li>
                    <li class="person">
                        <a href="#">个人资料</a>
                        <ul>
                            <li> <a href="{% url 'myhome_myinfo_information' %}">个人信息</a></li>
                            <li> <a href="#">安全设置</a></li>
                            <li class="active"> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                        </ul>
                    </li>
                    <li class="person">
                        <a href="#">我的交易</a>
                        <ul>
                            <li><a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
                            <li> <a href="#">退款售后</a></li>
                        </ul>
                    </li>
                    <li class="person">
                        <a href="#">我的资产</a>
                        <ul>
                            <li> <a href="#">优惠券 </a></li>
                            <li> <a href="#">红包</a></li>
                            <li> <a href="#">账单明细</a></li>
                        </ul>
                    </li>

                    <li class="person">
                        <a href="#">我的小窝</a>
                        <ul>
                            <li> <a href="#">收藏</a></li>
                            <li> <a href="#">足迹</a></li>
                            <li> <a href="#">评价</a></li>
                            <li> <a href="#">消息</a></li>
                        </ul>
                    </li>

                </ul>

            </aside>
        </div>

<script type="text/javascript">
    // 获取当前用户的所有收货地址
        getUserAllAddress()
        function getUserAllAddress(){
            // 清空之前的数据
            $('.AddressAll').empty()
            // 发送ajax请求获取数据
            $.get('{% url 'myhome_addresslist' %}',function(data){
                // console.log(data)
                if(data.error == 0){
                    // 有数据
                    var arr = data.data
                    // 循环数据
                    for (var i = 0; i < arr.length; i++) {
                        var li = $('.address li').eq(0).clone()
                        // 判断当前是否为默认
                        if(arr[i].isChecked){
                            li.addClass('defaultAddr')
                        }
                        li.attr('addrid',arr[i].id)
                        li.find('.buy-user').text(arr[i].shr)
                        li.find('.buy-phone').text(arr[i].shdh)
                        li.find('.province').text(arr[i].sheng)
                        li.find('.city').text(arr[i].shi)
                        li.find('.dist').text(arr[i].xian)
                        li.find('.street').text(arr[i].info)
                        // 让元素显示
                        li.show()
                        // 创建li加入到ul中
                        $('.AddressAll').append(li)
                    }
                }else{
                    // 没有数据

                }
            },'json')
        }

    // 地址选择  单击事件
        $('.AddressAll').on('click', '.new-option-r',function(){
            // 添加class defaultAddr
            $(this).parents("li").addClass('defaultAddr').siblings().removeClass('defaultAddr')
        })

    // 地址添加
        $('#addressadd').click(function(){
            var adds = {}
            adds.shr = $('#user-name').val()
            adds.shdh = $('#user-phone').val()
            adds.sheng = $('select[name=sheng]').val()
            adds.shi = $('select[name=shi]').val()
            adds.xian = $('select[name=xian]').val()
            adds.info = $('#user-intro').val()

            // 发送ajax请求,存储地址
            $.get('{% url 'myhome_addressadd'%}',adds,function(data){
                getUserAllAddress()
                // 触发取消事件
                $('#addressclose').trigger('click')
            },'json')
        })

    // 获取页面中的 下拉选框 绑定change事件
        $('.address select').click(function(){
            // 获取当前选中的元素的 id
            var id = $(this).val()

            // 发送ajax请求,获取下一级的数据
            $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
                // 判断返回的数据,如果为空,
                if(data.length == 0){ return }

                // 判断级别
                if(data[0].level == 2){
                    var sel = $('.address select[name=shi]')
                }else if(data[0].level == 3){
                    var sel = $('.address select[name=xian]')
                }

                var ops = ''
                // 遍历获取的结果,拼接成option选项
                for (var i = 0; i < data.length; i++) {
                    ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
                }
                // 把拼接好的选项加入到下拉框中
                sel.html(ops)

            },'json')
        })

        // 删除收货地址
        function delClick(v){
            id = $(v).parents('li').attr('addrid')
            $.get('{% url "myhome_myinfo_address_del" %}',{'id':id},function(data){
                if(data.error=="0"){
                    alert(data.data)
                    $(v).parents('li').remove()
                }
            },'json')
        }

        // 设为默认地址
        function default1(v){
            id = $(v).parents('li').attr('addrid')
            $.get('{% url "myhome_myinfo_address_default" %}',{'id':id},function(data){
                if(data.error=="0"){
                    alert(data.data)
                }
            },'json')
        }

</script>
{% endblock %}
